<script setup>
import {ref, reactive, computed, watch} from "vue"; 
import dayjs from "dayjs";
import utils from "@/common/utils/utils.js";
// 手机组件
import { DraggableContainer } from "vue3-draggable-resizable";
import Vue3DraggableResizable from "vue3-draggable-resizable";
//default styles
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
import { useStore } from "vuex";

// 默认数据
import { logo_urls_item } from '@/views/shotstack/MixedCutPlatforms/utools/template.js'


// 混剪 公共参数配置
import {
  // 视频截取首帧画面
    captureFirstFrame,
  // 计算可拖拽区域的宽高比例
  calculateDraggableArea
} from "@/common/utils/richTextProcessing.js";

// 仓库
const store = useStore();

const props = defineProps({
    // 手机组件是否显示隐藏
    phoneVisible: {
        type: Boolean,
        default: false,
    },
    visible: {
        type: Boolean,
        default: false,
    },
    // 当前的logo参数数据
    logoData: {
        type: Object,
        default: () => {
            return logo_urls_item()
        }
    }
})

const state = reactive({
    showImg:true
})

// 仓库中的混剪数据
const VideoMashup = computed(() => {
  return store.state.videoMixCut.VideoMashup;
});

const ResizableActive = ref(true)

const logoData = reactive(logo_urls_item())

const logoImgStyle = computed(() => {
    return {
        height: logoData.height + 'px',
        width: logoData.width + 'px',
        opacity: props.logoData?.opacity,
        // transition: "all 0.1s",
    }
})

const background = ref({
  type: "color",
  url: "transparent",
});

// 分辨率
const distinguishability = reactive({
  width: "",
  height: "",
});

// 当前logo背景数据
const resizableStyle = computed(() => {
  const sizeData = calculateDraggableArea(
    +distinguishability.width,
    +distinguishability.height
  );
    console.log(background.value, "背景");
  console.log(sizeData,'父组件大小');
  
  return {
    width: sizeData.draggableWidth + "px",
    height: sizeData.draggableHeight + "px",
    transition: "all 0.3s",
    'z-index': 1,
    background: 'transparent'
  };
});

// 背景设置的参数
const bgc = computed(() => {
  const data = VideoMashup.value?.background
  if (data?.type == 1) {
    return {
      'background': data.rgba
    }
  } else if (data?.type == 2 || data?.type == 3) {
    let url = data.material_urls[0].url
    return {
      'background': `url(${url})`,
      'background-position': 'center',
      'background-size': 'cover'
    }
  } else {
    return {
      'background': '#707070'
    }
  }
});

const parentBgc = computed(() => {
  let returnVal =
    background.value.type == "color"
      ? {
        background: background.value.url,
      }
      : {
        background: `url(${background.value.url})`,
        'background-repeat': 'no-repeat',
        'background-size': 'contain',
        "backgroundPosition": "center",
      };

  return returnVal
})

// 拖动结束修改 x和y的位置
const dragEndHandle = (data) => {
  // return;
    console.log("拖拽结束", data, logoData);
  
  // nextTick(() => {
//   const spanDom = document.getElementById("editor_content_p");
//   spanWidth.value = spanDom?.offsetWidth;
//   console.log("修改位置调用", data, spanWidth.value, data.x + spanWidth.value / 2);
//   store.commit("videoMixCut/MODIFY_SUBTITLES_POSITION", {
//     x: data.x,
//     y: data.y,
//     showX: (data.x + spanWidth.value / 2) + 1.5,
//     rightX: data.x + spanWidth.value,
//     id: editSubtitleData.value.id,
//   });
};


// 使用的背景
const useBgc = async () => {

 // 判断使用的背景
 const find = VideoMashup.value.resource_data.find(
    (ele) => ele.material_list.length
  );

  if (!find) return (background.value = { url: "transparent", type: "color" });
  const material = find.material_list[0];

  if (material?.scene_type == "video") {
    const url = await captureFirstFrame(material.material_url);
    
    if (url) {
      background.value = { url, type: "img" };
    } else {
      background.value = "transparent";
      background.value = { url: "transparent", type: "color" };
    }
  } else if (material?.scene_type == "image") {
    const url = material.material_url;
    url
      ? (background.value = { url, type: "img" })
      : (background.value = { url: "transparent", type: "color" });
  } else {
    background.value = { url: "transparent", type: "color" };
  }

};

watch(() => props.phoneVisible, (nv, ov) => {
    if (nv) {
          // 存储当前的分辨率
            distinguishability.width = VideoMashup.value.width;
        distinguishability.height = VideoMashup.value.height;
    }
}, {
    immediate: true
})

// 初始赋值
const initData = (data) => {
    Object.assign(logoData, data)
}

// 返回当前数据
const giveData = () => {
    console.log(logoData,'xy数据');
    return {
        x: logoData.x,
        y: logoData.y,
        width: logoData.width,
        height: logoData.height,
    }
}
defineExpose({
    useBgc,
    initData,
    giveData
})

</script>

<template>

          <!-- 手机组件 -->
          <div id="logo_phoneConCover" class="phoneConCover_content" :style="{
            opacity: props.phoneVisible ? 1 : 0,
            transition: 'opacity 0.5s',
            left: visible ? 'calc((100% - 50%) / 2)' : '-999999px',
            width: 360 + 30 + 'px',
            height: 730 + 47.809 + 'px'
          }">

            <!-- 手机头部 -->
            <div class="mobile-header">
              <div class="time">{{ dayjs().format("HH:mm") }}</div>
              <div class="wife">
                <cu-icon type="icon-xinhao" style="font-size: 12px"></cu-icon>
                <cu-icon type="icon-wife" style="margin: 0 2px; font-size: 14px"></cu-icon>
                <cu-icon type="icon-electricity-full" style="font-size: 14px"></cu-icon>
              </div>
            </div>
            <!-- 模拟抖音背景 -->
            <div class="bgc_content" :style="{
              'background-image': state.showImg
                ? `url(${utils.staticPath + 'images/workAi/shotstack/bg_cover.png'
                })`
                : '',
            }"></div>

            <!-- 素材背景图 -->
            <div class="bgc_content" :style="{
              ...parentBgc,
              'z-index': 1,
              left: 0
            }">
            </div>
            <!-- 底层背景图 -->
            <div class="left_phone_view" :style="{
              ...bgc,
              display: 'flex',
              'justify-content': 'center',
              'align-items': 'center'
            }">
              <DraggableContainer :style="resizableStyle" :referenceLineColor="'white'">
                <!-- lockAspectRatio : 是否锁定比例 -->
                <Vue3DraggableResizable   v-model:x="logoData.x"
                  v-model:y="logoData.y" v-model:w="logoData.width" v-model:h="logoData.height"
                   :lockAspectRatio="true"
                   v-model:active="ResizableActive"
                   :resizable="true" :draggable="true"
                  :parent="true" :key="'asdfsadf'" @drag-end="dragEndHandle">
                  <div :style="logoImgStyle" v-if="props.logoData.url">
                    <img style="height: 100%; width: 100%; object-fit: fill;" :src="props.logoData.url" alt="">
                  </div>
                </Vue3DraggableResizable>
              </DraggableContainer>
            </div>
            <div class="bottom_View_control">
              <a-button @click="state.showImg = !state.showImg">{{ state.showImg ? "关闭" : "开启" }}抖音视图</a-button>
            </div>

          </div>
</template>


<style lang="less" scoped>

  // 手机样式
  .phoneConCover_content {
    // width: 360px;
    // height: 730px;
    position: fixed;
    border-radius: 20px;
    top: 50%;
    left: calc(calc(100% - 50%) / 2);
    transform: translate(-50%, -50%);
    background-color: #000;
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    // overflow: hidden;

    .mobile-header {
      height: 44px;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.281);
      background: black;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      padding: 10px 10px;
      overflow: hidden;
    }

    // 背景图
    .bgc_content {
      position: absolute;
      top: 43.5px;
      left: 0;
      width: 100%;
      height: calc(100% - 88px);
      background-repeat: no-repeat;
      background-size: contain;
      // background-size: 100%;
      // height: 100%;
      /* 添加这一行 */
      pointer-events: none;
      z-index: 2;
    }

    .left_phone_view {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: calc(100% - 88px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.281);

      .editor_content {
        margin-bottom: 0;
        border: none;
        resize: none;
        height: auto;
        display: inline-block;
        // overflow: hidden;
        // 禁止选中
        pointer-events: none;
        // 换行显示
        white-space: pre-wrap;
        // 不考虑连贯性, 强制换行
        word-break: break-all;
      }
    }

    // 手机下方的控制按钮
    .bottom_View_control {
      position: absolute;
      bottom: -50px;
      left: 50%;
      z-index: 5;
      transform: translate(-50%, 0);
      display: flex;
    }
  }

</style>